<template>
	<view>
		<view class="titl">
			<view class="titl-left">
				<view class="nickname">
					{{information.name}}
				</view>
				<view class="address">
					{{information.address}}
				</view>
			</view>
			<image class="titl-right" :src="information.nImg" mode=""></image>
		</view>
		<view class="cont">
			<view v-for="(item,index) in information.cont" :key="index" :class="index>0?'order order-b':'order'">
				<image class="order-img" :src="item.dimg" mode=""></image>
				<view class="order-rig">
					<view>
						{{item.orderTit}}
					</view>
					<view class="order-cont">
						{{item.orderCont}}
					</view>
					<view class="order-pric">
						￥{{item.orderPric}}<text>×{{item.num}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="intr">
			<view class="intr-price">
				商品总额<text>￥{{information.price}}</text>
			</view>
			<view class="intr-price">
				运费<text>{{information.freight}}</text>
			</view>
			<view class="intr-dPrice">
				订单总价<text>￥{{information.dPrice}}</text>
			</view>
			<view class="intr-payment">
				实际付款<text>￥{{information.payment}}</text>
			</view>
		</view>
		<view class="intr bott">
			<view class="intr-price bott-price">
				订单编号<text class="copy" @click="cop">复制</text><text>{{serial}}</text>
			</view>
			<view class="intr-price bott-dat">
				下单时间<text>{{dat}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import url from '../../components/hosturl.js';
	export default {
		data() {
			return {
				information:{name:'高跟鞋',address:'河北省和华南是',nImg:'/static/coupon1.png',cont:[{dimg:'/static/coupon1.png',orderTit:'抽纸',orderCont:'3层',orderPric:'121.90',num:'1'},{dimg:'/static/coupon1.png',orderTit:'抽纸',orderCont:'3层',orderPric:'121.90',num:'1'}],price:'231.80',freight:'包邮',dPrice:'231.80',payment:'231.80'},
				serial:'74108529674196',
				dat:'2020.05.13 11.15'
			}
		},
		methods: {
			cop(){
				uni.setClipboardData({
				    data: this.serial,
				    success: function () {
				     uni.showToast({
				         duration: 2000
				     });
				    }
				});
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:'订单明细'
			})
			uni.setNavigationBarColor({
			    frontColor: '#ffffff',
			    backgroundColor: '#a286eb'
			});
			uni.request({
				url:url+'/Me/getParticulars',
				method:'GET',
				data:{
					token:uni.getStorageSync('token'),
					BeginTime:'2020-06-01 18:42:18',
					EndTime:'2020-06-01 18:42:18'
				},
				success(res) {
					console.log(new Date())
					console.log(res.data)
				}
			})
		}
	}
</script>

<style>
page{ background-color: #f8f8f8;color: #606266;font-size: 28rpx;font-weight: bold; }
.titl{ background-color: #fff;display: flex;justify-content: center;align-items: center; padding: 20rpx 30rpx; }
.nickname{ padding-bottom: 10rpx; }
.address{ color: #C8C8C8;font-size: 24rpx;padding-left: 20rpx; }
.titl-left{flex: 1;}
.titl-right{ border-radius: 50%;height: 100rpx;width: 100rpx;}
.cont{ background-color: #fff;padding: 0 30rpx;margin-top: 20rpx; }
.order{ background-color: #fff;display: flex;justify-content: center;align-items: center;padding: 30rpx 0; }
.order-b{ border-top: 1rpx #C0C4CC dotted; }
.order-img{ height: 120rpx;width: 180rpx;margin-right: 20rpx;}
.order-rig{ flex: 1; }
.order-cont{ color: #C8C8C8;font-size: 24rpx;font-weight: normal; }
.order-pric{ font-size: 24rpx;margin-top: 20rpx; }
.order-pric text{ float: right; }
.intr{ background-color: #fff;margin-top: 20rpx;padding: 30rpx;font-weight: normal; }
.intr-price,.intr-dPrice{ color: #C8C8C8;padding-bottom: 20rpx; }
.intr-price text,.intr-dPrice text,.intr-payment text{ color: #606266;float: right;}
.intr-dPrice text,.intr-payment text{ font-weight: bold; }
.intr-payment{ border-top: 1rpx #EEEEEE dotted;padding: 30rpx 0 10rpx; }
.bott{margin-bottom: 30rpx;}
.bott-dat{padding: 0;}
.bott-price text,.bott-dat text{ color: #8B8B8B;font-size: 22rpx; }
.bott-price .copy{border: 1rpx #606266 solid;border-radius: 25rpx;height: 42rpx; line-height: 36rpx;padding: 0 10rpx;font-size: 18rpx;margin-left: 10rpx;margin-top: -5rpx;}
</style>